<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <link rel="shortcut icon" href="<!--{eval echo register_static('img/touch-icon-57x57.png');}-->">

        <title>粉粉管理系统</title>

        <!-- Bootstrap core CSS -->
        <link href="<!--{eval echo register_static('css/bootstrap.min.css');}-->" rel="stylesheet">
        <link href="<!--{eval echo register_static('css/bootstrap-reset.css');}-->" rel="stylesheet">

        <!--Animation css-->
        <link href="<!--{eval echo register_static('css/animate.css');}-->" rel="stylesheet">

        <!--Icon-fonts css-->
        <link href="<!--{eval echo register_static('assets/font-awesome/css/font-awesome.css');}-->" rel="stylesheet" />
        <link href="<!--{eval echo register_static('assets/ionicon/css/ionicons.min.css');}-->" rel="stylesheet" />
        
        <link href="<!--{eval echo register_static('assets/sweet-alert/sweet-alert.min.css');}-->" rel="stylesheet">
        
        <!-- Plugins css -->
        <link href="<!--{eval echo register_static('assets/modal-effect/css/component.css');}-->" rel="stylesheet">

        <!-- DataTables -->
        <link rel="stylesheet" href="<!--{eval echo register_static('assets/datatables/jquery.dataTables.min.css" rel="stylesheet');}-->" />

        <!-- Custom styles for this template -->
        <link href="<!--{eval echo register_static('css/style.css');}-->" rel="stylesheet">
        <link href="<!--{eval echo register_static('css/helper.css');}-->" rel="stylesheet">
        
        <!-- My styles for this template -->
        <link href="<!--{eval echo register_static('css/common.css');}-->" rel="stylesheet">

    </head>

    <body>

        <!-- Aside Start-->
        <!--{template admin_v2/leftside}-->
        <!-- Aside Ends-->


        <!--Main Content Start -->
        <section class="content">
            
            <!-- Header -->
            <!--{template admin_v2/header}-->
            <!-- Header Ends -->


            <!-- Page Content Start -->
            <!-- ================== -->

            <div class="wraper container-fluid diary-topics">
            
            	<div class="row">
                    <div class="col-md-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">手账分类</h3>
                            </div>
							<br/>
                            <div class="row">
								<div class="col-md-1">
                            <button class="btn btn-primary"  data-toggle="modal" data-target=".bs-example-modal-lg">新建分类</button>                                 
                            <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;">
                                    <div class="modal-dialog modal-lg">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                            	<h4 class="modal-title" id="myLargeModalLabel">新建分类</h4>
                                            </div>
                                            <div class="modal-body">
                                             	<div class="row">
                                             		<div class="col-md-12">
                                             			<div class="form">
						                                    <form class="cmxform form-horizontal tasi-form" id="creategrouptypeForm" method="get"  novalidate="novalidate">
						                                        <div class="form-group ">
						                                            <label  class="control-label col-lg-2">名称</label>
						                                            <div class="col-lg-10">
						                                                <input class=" form-control"  name="cname" type="text" >
						                                            </div>
						                                        </div>
						                                        <div class="form-group ">
						                                            <label class="control-label col-lg-2">分类id</label>
						                                            <div class="col-lg-10">
						                                                <input class="form-control"  name="cid"  type="text">
						                                            </div>
						                                        </div>
						                                        <div class="form-group">
						                                            <label  class="control-label col-lg-2">排序</label>
						                                            <div class="col-lg-10">
						                                                <input class="form-control"   name="display" type="text" placeholder="填写数字，排序由大到小向下排">
						                                            </div>
						                                        </div>
																<div class="form-group">
																	<label  class="control-label col-lg-2">类型</label>
																	<div class="col-lg-10">
																		<select name="type" class="form-control">
																			<option value="6">标签</option>
																			<option value="8">贴纸</option>
																			<option value="9">花边笔</option>
																			<option value="11">边框</option>
																			<option value="12">插件</option>
																			<option value="10">模板</option>
																			<option value="13">手账引导器</option>
																		</select>
																	</div>
																</div>
						                                         <div class="form-group">
						                                            <label  class="control-label col-lg-2">状态</label>
						                                            <div class="col-lg-10">
						                                            	<select name="status" class="form-control">
						                                            		<option value="0">上线</option>
						                                            		<option value="1">下线</option>
						                                            	</select>
						                                            </div>
						                                        </div>
						                                        <div class="form-group">
						                                            <div class="col-lg-offset-2 col-lg-10">
						                                            	  <input type="hidden" name="ac" value="planner_category_class">
 							  											  <input type="hidden" name="op" value="add">
						                            					<button class="btn btn-primary" id="creategrouptype" type="button">创建</button>
						                                            </div>
						                                        </div>
						                                    </form>
														</div> 
                                             		</div>
                                          
                                             	</div>
                                            </div>
                                        </div><!-- /.modal-content -->
                                    </div><!-- /.modal-dialog -->
                            </div><!-- /.modal -->
									</div>
								<div class="col-md-7 form-group">
									<div class="form-inline">
										<div style="display: inline-block; padding-right: 20px">筛选：</div>
										<div class="form-group">
											<select name="type" id="selectPlannerType" class="form-control myChoose">
												<option value="8">贴纸</option>
												<option value="11">边框</option>
												<option value="6">标签</option>
												<option value="9">花边笔</option>
												<option value="12">插件</option>
												<option value="10">模板</option>
												<option value="13">手账引导器</option>
											</select>
										</div>
								 </div>
							</div>
                            <div class="panel-body">
                       	
                                <div class="row">
                                    <div class="col-md-12 col-sm-12 col-xs-12">
                                        <table id="datatable" class="table table-striped table-bordered">
                                            <thead>
                                                <tr>
                           							 <th>分类id</th>
                            						 <th>排序(倒序)</th>
                            						 <th>名称</th>
                          							 <th>状态</th>
                                                	 <th>管理</th>     
                                                </tr>
                                            </thead>

                                            <tbody id="tbody_html">


                                             </tbody>
                                         </table>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>

            </div>
            <!-- Page Content Ends -->
            <!-- ================== -->
            
            <div id="con-close-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
      
  			</div><!-- /.modal -->
            

            <!-- Footer Start -->
            <!--{template admin_v2/footer}-->
            <!-- Footer Ends -->



        </section>
        <!-- Main Content Ends -->


        <!-- js placed at the end of the document so the pages load faster -->
        <script src="<!--{eval echo register_static('js/jquery.js');}-->"></script>
        <script src="<!--{eval echo register_static('js/bootstrap.min.js');}-->"></script>
        <script src="<!--{eval echo register_static('js/pace.min.js');}-->"></script>
        <script src="<!--{eval echo register_static('js/wow.min.js');}-->"></script>
        <script src="<!--{eval echo register_static('js/jquery.nicescroll.js');}-->" type="text/javascript"></script>

		<script src="<!--{eval echo register_static('js/jquery.app.js');}-->"></script>
		<script src="<!--{eval echo register_static('js/handlebars-v4.0.5.js');}-->"></script>
		<script src="<!--{eval echo register_static('js/handlebars-planner-helper.js');}-->"></script>
		<script src="<!--{eval echo register_static('layer/layer.js');}-->"></script>
        <script src="<!--{eval echo register_static('assets/datatables/jquery.dataTables.min.js');}-->"></script>
        <script src="<!--{eval echo register_static('assets/datatables/dataTables.bootstrap.js');}-->"></script>
        <script src="<!--{eval echo register_static('assets/sweet-alert/sweet-alert.min.js');}-->"></script>
        <script src="<!--{eval echo register_static('assets/sweet-alert/sweet-alert.init.js');}-->"></script>
        
        <!-- Modal-Effect -->
        <script src="<!--{eval echo register_static('assets/modal-effect/js/classie.js');}-->"></script>
        <script src="<!--{eval echo register_static('assets/modal-effect/js/modalEffects.js');}-->"></script>
		<script type="text/template" id="categorylist">
			{{#.}}
			<tr>
				<td>{{this.cid}}</td>
				<td>{{this.display}}</td>
				<td>{{this.cname}}</td>
				<td>
					{{{displayStatus this.status}}}
				</td>
				<td>
					<a class="on-default edit-row btn btn-default btn-sm editgrouptype" href="javascript:void(0)" data-type="{{this.type}}" data-cid="{{this.cid}}" ><i class="fa fa-pencil"></i></a>
				</td>
			</tr>
			{{/.}}
		</script>
        <script type="text/template" id="editsource">
        	{{#.}}
				  <form id="editgrouptypeForm">
						<div class="form-group ">
						 <label  class="control-label col-lg-2">名称</label>
						 <div class="col-lg-10">
						  <input class=" form-control"  name="cname" type="text" value="{{this.cname}}">
						 </div>
						 </div>
						  <div class="form-group">
						  <label  class="control-label col-lg-2">排序</label>
						   <div class="col-lg-10">
						    <input class="form-control" name="display" type="text" placeholder="填写数字，排序由大到小向下排" value="{{this.display}}">
						    </div>
						   </div>
					  <div class="form-group">
						  <label  class="control-label col-lg-2">类型</label>
						  <div class="col-lg-10">
							  <select name="type" class="form-control">
								  {{{selectType this.type}}}
							  </select>
						  </div>
					  </div>
						    <div class="form-group">
						    <label  class="control-label col-lg-2">状态</label>
						    <div class="col-lg-10">
						    <select name="status" class="form-control">
								{{{selectStatus this.status}}}
						     </select>
						     </div>
						    </div>

						      <div class="form-group">
						      <div class="col-lg-offset-2 col-lg-10">
								<br/>
							 <input type="hidden" name="cid" value="{{this.cid}}">
							  <input type="hidden" name="ac" value="planner_category_class">
 							  <input type="hidden" name="op" value="edit">
						      <button class="btn btn-primary" id="editgrouptype" type="button">修改</button>
						     </div>
						      </div>
						   </form>
			{{/.}}
        </script>
		<script type="text/javascript">
			var _where = {'type':8};
			$(document).off('.editgrouptype').on('click','.editgrouptype',function(){
				var index    = layer.load();
				var edithtml = Handlebars.compile($('#editsource').html());
				var data     = {'cid':$(this).data('cid'),'type':$(this).data('type'),'ac':'planner_category_class','op':'detail'};
				$.ajax(
    		            {
    		            	dataType:   "json",
    		                url     :   'admin.php',
    		                type    :   "GET",
    		                data    :   data,
    		                success :   function(resdata)
    		                            {
    		                				layer.close(index);
			    		                	layer.open({
			    		  					  type: 1,
			    		  					  skin: 'layui-layer-demo', //样式类名
			    		  					  closeBtn: 1, //显示关闭按钮
			    		  					  title:'编辑信息',
			    		  					  shift: 2,
			    		  					  area:['40%','30%'],
			    		  					  shadeClose: true, //开启遮罩关闭
			    		  					  content: edithtml(resdata.result)
			    		  					});
    		                            }
    		            });
			
			});
			
			$(document).off('#creategrouptype').on('click','#creategrouptype',function(){
				var datacreate = $('#creategrouptypeForm').serialize();
				_where['type'] = $('#creategrouptypeForm select[name=type]').val();
				$('.bs-example-modal-lg').modal('hide');
				swals(datacreate);

			});
			
			$(document).off('#editgrouptype').on('click','#editgrouptype',function(){
				var datas=$("#editgrouptypeForm").serialize();
				_where['type'] = $('#editgrouptypeForm select[name=type]').val();
				swals(datas);
				layer.closeAll();
			});
			var swals = function (data, url, title, text){
				if (url === undefined) {
					url = "admin.php";
				}
				if (title === undefined) {
					title = "确认操作?";
				}
				if (text === undefined) {
					text  = "请慎重操作!";
				}
	            	swal(
	                		{   
		                		title: title,
		                		text: text,
		                		type: "warning",   
		                		showCancelButton: true,   
		                		confirmButtonColor: "#DD6B55",   
		                		confirmButtonText: "Sure!",   
		                		closeOnConfirm: false 
	                		}, 
	                		function(){
	                			$.ajax(
	                		            {
	                		            	dataType:   "json",
	                		                url     :   url,
	                		                type    :   "GET",
	                		                data    :   data,
	                		                success :   function(data)
	                		                            {
	                		                				if(data.result == true){
	                		                					swal("操作完成!", "", "success");
	                		                				}else{
	                		                					swal("操作失败!", "", "error");
	                		                				}
															request();
	                		                            }
	                		            });
	                		});        	
	            }

			$(document).off('#selectPlannerType').on('change','#selectPlannerType',function(){
				var type = $(this).val();
				_where['type'] =  type;
				request();
			});
	         var request = function(){
				 var lists = Handlebars.compile($('#categorylist').html());
				 $.ajax(
						 {
							 dataType:   "json",
							 url     :   'admin.php?ac=planner_category_class&op=list',
							 type    :   "GET",
							 data    :   _where,
							 success :   function(data)
							 {
								 choseSelect();
								 $("#tbody_html").empty().append(lists(data.result.cats));
							 }
						 });
			 };
			 var choseSelect = function(){
				 	_where['type'] ? _where['type'] : _where['type'] = 8;
					$('#selectPlannerType option[value='+_where['type']+']').attr('selected','true');
			 }
			//第一次进来访问
			request();
        </script>
    </body>
</html>
